<template>

  <div class="login-layout">

    <div v-show="wxLoginShow" class="login-mask" />

    <div class="layout-main flex">

      <div class="main-lt">
        <homeImg></homeImg>
      </div>

      <div class="login-main" :style="{paddingTop:Type==='login'?'120px':'78px'}">
        <div class="title-box">
          <div class="title pointer" @click="$router.replace({path:'/home'})">
            <el-image style="width: 200px;height: 32px;" fit="cover" :src="logoImg" lazy />
          </div>

        </div>

        <div>

          <!-- 用户名登录 -->
          <yyy-login v-if="Type == 'login'" @changeType="handleTypeChange" />
          <!-- 用户注册 -->
          <!-- <yyy-register v-if="Type=='register'" @changeType="handleTypeChange" /> -->
          <!-- 找回密码 -->
          <find-pwd v-if="Type=='findPwd'" @changeType="handleTypeChange" />

          <!-- 微信绑定账号 -->
          <!-- <binding-account v-if="Type=='binding'" :wx-info="wxInfo" @changeType="handleTypeChange" /> -->
          <!-- 选择登录方式 -->
          <!-- <div v-if="Type==='login'" class="layout-footer flex">

            <div v-if="Type==='login'" class="user-btn flex" @click="changeWXLogin">
              <p class="img">
                <el-image fit="cover" :src="wxImg" style="width: 100%;height: 100%;" />
              </p>
              <p class="btn">微信登录</p>
            </div>

            <p class="reg-btn" @click="handleTypeChange('register')">立即注册</p>

          </div> -->
        </div>

      </div>

    </div>

    <yyyWx :wx-show.sync="wxLoginShow"/>

  </div>
</template>

<script>
// import {
//   validUsername
// } from '@/utils/validate'
import {
  weixinlogin,
  findCampaignCount
} from '@/api/user.js'
import {
  setToken
} from '@/utils/auth.js'
import {
  getDefultPath
} from '@/utils/index.js'

import homeImg from '@/components/home/imgPc.vue'
import yyyLogin from './components/login.vue'
import yyyRegister from './components/register.vue'
import yyyWx from './components/wx-login.vue'
import findPwd from './components/find-pwd.vue'
import bindingAccount from './components/binding-account.vue'
import {isBindWeixin} from '@/api/user.js'

export default {
  name: 'Login',
  components: {
    homeImg,
    yyyLogin,
    yyyRegister,
    yyyWx,
    findPwd,
    bindingAccount
  },
  data() {
    return {
      time: '',
      number: 0,
      isShow: true,
      wxLoginShow: false,
      Type: undefined, // 显示组件类型
      logoImg: require('@/assets/images/base/logoBule.svg'),
      bgImg: require('@/assets/images/login/bg.jpg'),
      ltImg: require('@/assets/images/login/lt.png'),
      wxImg: require('@/assets/images/login/wx.png'),
      wxInfo: {} // 未绑定用户账号的微信扫码登录用户信息
    }
  },
  destroyed() {
    clearTimeout(this.time)
  },
  // 组件前置导航守卫   查看是否有
  // beforeRouteEnter(to, from, next) {
  //   next (vm =>{
  //     if (Object.keys(to.query).length > 0 && to.query.code) {
  //       vm.Type = 'binding'
  //       console.log(vm.wxInfo)
  //     }
  //   })
    // next(async(vm) => {
    //   if (Object.keys(to.query).length > 0 && to.query.code) {
    //     var params = to.query
    //     const res = await weixinlogin(params)

    //     if (res.data.code === 20000) {
    //       if (!res.data.data.token) {
    //         vm.Type = 'binding'
    //         vm.wxInfo = { ...res.data.data
    //         }
    //       } else {
    //         // 设置token
    //         setToken(res.data.data.token)
    //         const userInfo = await vm.$store.dispatch('user/getInfo')
    //         const path = getDefultPath(userInfo.roleName)
    //         vm.$router.replace({
    //           path
    //         })
    //       }
    //     }
    //   } else {
    //     next()
    //   }
    // })
  // },
  created() {
    // const arr = ['login', 'findPwd', 'register', 'binding']
    const arr = ['login', 'findPwd']
    if (this.$route.query.type && arr.indexOf(this.$route.query.type) !== -1) {
      this.Type = this.$route.query.type
    } else {
      this.handleTypeChange('login')
    }

    this.Type = this.$route.query.type || 'login'
  },

  mounted() {
    if(localStorage.getItem('character')) {
      this.isBindWeixin()
    }
    this.number = 0
  },
  destroyed() {
    clearTimeout(this.time)
  },
  methods: {
    //绑定微信轮询
    async isBindWeixin() {
       let data = {
        wechatLoginUuid: localStorage.getItem('character')
      }
      let res = await isBindWeixin(data)
      if (res.data.code === 20000) {
        this.$message.closeAll()
        if (res.data.data.type  === 1) {
          setToken(res.data.data.token)
          const userInfo = await this.$store.dispatch('user/getInfo')
          const path = getDefultPath(userInfo.roleName)
          this.$router.replace({
              path
        })
        } else if(res.data.data.type === 2) {
          this.wxInfo = { ...res.data.data}
          this.$nextTick(()=>{
            this.Type = 'binding'
          })
        }
        window.localStorage.setItem("character", '')
      } else {
        if(this.number === 9) {
           window.localStorage.setItem("character", '')
        } else {
          setTimeout(()=>{
              this.number++
              this.isBindWeixin()
            },2000)
        }
      }
    },
    handleTypeChange(type) {
      console.log(type)
      this.Type = type
      const that = this
      this.$router.replace({
        path: '/login',
        query: { ...that.$route.query,
          type
        }
      })
      this.$forceUpdate()
    },
    changeWXLogin() {
      const windowWidth = document.body.clientWidth
      if (windowWidth < 900) {
		  this.$message.closeAll()
		  this.$message.error('请在PC端登录')
		  return false
      }
      this.wxLoginShow = true
    }

  }
}
</script>

<style lang="scss" scoped>
  html,
  body,
  #app {
    background-color: #FFFFFF;
  }

  .login-layout {
    box-sizing: border-box;
    margin: 0;
    width: 100vw;
    height: 100vh;
    min-width: 1200px;
    min-height: 700px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(221, 238, 239, 0.43) 0%, #DEFFFF 100%), #FFFFFF;
    position: relative;

    .login-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.2);
    }

    .layout-main {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      justify-content: flex-end;

      .main-lt {

        position: relative;
        margin-right: 176px;
        zoom: 0.98;

      }

    }

  }

  .login-main {
    width: 500px;
    min-height: 594px;
    padding: 80px 60px;
    padding-bottom: 60px;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.04);
    border-radius: 10px;

    .title {
      text-align: center;
      margin-bottom: 48px;
    }

    .layout-footer {

      .user-btn,
      .wx-btn {
        p.img {
          width: 24px;
          height: 24px;

        }

        .btn {
          flex: 1;
          text-align: center;
          font-size: 14px;
          color: rgba(0, 200, 0, 1);
          padding-left: 10px;
          cursor: pointer;

        }

      }

      .reg-btn {
        color: #24BEBE;
        cursor: pointer;
        font-size: 14px;
      }

    }

  }
</style>
